<template>
    <div id='footers' class="w"> 
        <div class="footer-left">
            <ul>
                <li v-for="(item,i) in xiao" :key="i">
                    <img :src="item.img" alt="">
                    <p>{{item.title}}</p>
                </li>
            </ul>
        </div>
        <div class="item" v-for="item in items" :key="item">
            <img :src="item" alt="">
        </div>
    </div>
</template>

<script>
export default {
 name : 'footers',
    //组件
    components: {

    },
    //数据
    data() {
        return {
            items : ['https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340','https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a43378b96501d7e227a9018fe2668c5.jpg?w=632&h=340','https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/793913688bfaee26b755a0b0cc8575fd.jpg?w=632&h=340'],
            xiao : [
                {
                    title : '小米秒杀',
                    img : 'imges/bannerxiao/秒杀.png'
                }
                ,{
                    title : '企业团购',
                    img : 'imges/bannerxiao/企业.png'
                }
                ,{
                    title : 'F码通道',
                    img : 'imges/bannerxiao/F码.png'
                }
                ,{
                    title : '米粉卡',
                    img : 'imges/bannerxiao/米粉卡.png'
                }
                ,{
                    title : '以旧换新',
                    img : 'imges/bannerxiao/换新.png'
                }
                ,{
                    title : '话费充值',
                    img : 'imges/bannerxiao/话费.png'
                }
                
            ]
        };
    },
    //挂载后
    mounted() {

    },
    //方法
    methods: {

    },
    //过滤，筛选
    filters: {

    },
    //计算
    computed: {

    },
    //监听
    watch: {
        //被监听者名称
        $route: {
            //是否一进入页面就开始监听
            immediate: false,
            //执行函数
            handler(newVal,oldVal) {

            },
            //是否深度监听
            deep: false,
        },
    },
};
</script>

<style lang='scss' scoped>
#footers{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    div{
        float: left;
    }
    .footer-left{
        background-color: #5F5750;
        width: 234px;
        height: 170px;
        ul{
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            li{
                width: 76px;height: 82px;
                padding: 4px 6px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img{
                    width: 24px;
                    height: 24px;
                }
                p{
                    margin-top: 6px;
                    color: rgb(156, 156, 156);
                    font-size: 12px;
                }
            }
        }
    }
    .item{
        width: 306px;
        height: 170px;
        img{
            width: 100%;
            height: 100%;
            display: block;
        }
    }
   
}
</style>
